<script setup lang="ts">
import { useEcharts } from '@hooks/useChart'
import type { EChartsCoreOption } from 'echarts/core'
import { onMounted, ref, Ref, watch } from 'vue'
import { hostSales as Enum } from '@/contants/home'

const disChannel: Ref<null | HTMLElement> = ref(null)
interface DetailProps {
  type: Enum
}
// 初始化默认参数
const props = defineProps<DetailProps>()
const mockData = {
  [Enum['花卉']]: [
    { value: 10, name: '草本花卉' },
    { value: 10, name: '木本花卉' },
    { value: 25, name: '观叶植物' },
    { value: 30, name: '盆栽植物' },
    { value: 12, name: '水培植物' },
    { value: 13, name: '其他' }
  ],
  [Enum['玩具']]: [
    { value: 30, name: '婴儿玩具' },
    { value: 30, name: '幼儿玩具' },
    { value: 10, name: '幼童玩具' },
    { value: 15, name: '儿童玩具' },
    { value: 10, name: '成人玩具' },
    { value: 5, name: '其他' }
  ],
  [Enum['男装']]: [
    { value: 10, name: '商务' },
    { value: 30, name: '休闲' },
    { value: 25, name: '运动' },
    { value: 12, name: '简约' },
    { value: 5, name: '奢华' },
    { value: 18, name: '其他' }
  ],
  [Enum['宠物']]: [
    { value: 24, name: '宠物粮' },
    { value: 25, name: '宠物衣服' },
    { value: 15, name: '宠物药' },
    { value: 26, name: '宠物器材' },
    { value: 10, name: '其他' }
  ],
  [Enum['鞋子']]: [
    { value: 20, name: '男鞋' },
    { value: 70, name: '女鞋' },
    { value: 10, name: '童鞋' }
  ],
  [Enum['童装']]: [
    { value: 18, name: '婴儿' },
    { value: 30, name: '幼儿' },
    { value: 30, name: '儿童' },
    { value: 22, name: '幼童玩具' }
  ],
  [Enum['手机']]: [
    { value: 30, name: '苹果' },
    { value: 20, name: '华为' },
    { value: 20, name: '小米' },
    { value: 10, name: '三星' },
    { value: 20, name: '其他品牌' }
  ],
  [Enum['化妆品']]: [
    { value: 15, name: '精华水' },
    { value: 20, name: '精华乳' },
    { value: 15, name: '面霜' },
    { value: 10, name: '洗面奶' },
    { value: 10, name: '卸妆类' },
    { value: 10, name: '香水' },
    { value: 15, name: '其他' }
  ],
  [Enum['女装']]: [
    { value: 20, name: '连衣裙' },
    { value: 15, name: '短裙' },
    { value: 22, name: '衬衣' },
    { value: 13, name: '外套' },
    { value: 15, name: '内衣' },
    { value: 15, name: '配饰' }
  ]
}
const init = (type: Enum) => {
  const options: EChartsCoreOption = {
    title: {
      text: '消费画像',
      top: '10px'
    },
    series: [
      {
        name: '用户画像',
        type: 'pie',
        radius: ['20%', '50%'],
        center: ['45%', '60%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: mockData[type]
      }
    ]
  }
  useEcharts(disChannel.value as HTMLElement, options)
}

watch(() => props.type, () => {
  init(props.type)
})
onMounted(() => {
  init(props.type)
})
</script>
<template>
  <div
    ref="disChannel"
    :style="{
      width: '95%',
      height: '100%'
    }"
    style="margin: 0 auto"
  ></div>
</template>
<style lang="scss"></style>
